<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读了么！-店铺信息</title>
    <link href="style/setUs.css" rel="stylesheet" type="text/css">
    <link href="style/myShop.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/First_Page.js"></script>
</head>
<body>
<header>
    <div class="head_d">
        <div class="leftH">
            <span id="dateTime"></span>
            <a>创建店铺</a>
        </div>
        <div class="rightH">
            <li>${sessionScope.user.userName}</li>
            <button style="width: 80px;height: 20px;color: black" class="toLogin" onclick="login2exit()">退出登录</button>
        </div>
    </div>
</header>
<div class="gl">
    <span>读了么</span>卖家工作平台
</div>
<div class="manage">
    <div class="leftM">
        <div class="categoryFirst">
            <img src="image/c1.png">
            <span class="title">店铺管理</span>
            <ul class="list">
                <li><a href="shopIndex.jsp">我的店铺</a></li>
            </ul>
        </div>
        <hr/>
        <div class="category">
            <div>
                <img src="image/c2.png">
                <span class="title">交易管理</span></div>
            <ul class="list">
                <li>已卖出的商品</li>
                <li>评价管理</li>
            </ul>
        </div>
        <div class="category">
            <div class="list">
                <img src="image/c3.png">
                <span class="title">物流管理</span></div>
            <ul class="list">
                <li ><a href="shopSendGoods.jsp">发货</a></li>
                <li>物流工具</li>
            </ul>
        </div>
        <div class="category">
            <img src="image/c4.png">
            <span class="title">商品管理</span>
            <ul class="list">
                <li>发布书籍</li>
                <li>出售中的书籍</li>
            </ul>
        </div>
        <div class="categoryLast">
            <img src="image/c5.png">
            <span class="title">客户服务</span>
            <ul class="list">
                <li>退款管理</li>
                <li>违规记录</li>
            </ul>
        </div>
    </div>
    <div class="rightM">
        <div class="firstT"><span>我的店铺</span></div>
        <div class="lc-title"><span>店铺信息：</span></div>
        <form method="post" action="/openShop" enctype="multipart/form-data">
            <div class="dXX">
                <div class="dName"><a>店铺名：</a><input type="text" placeholder="请输入你的店铺名称" id="shopName"
                                                     name="shopName"><br>
                    <a style="color: red;font-size: 10px">！只有第一次编辑信息的时候可以修改名称，请谨慎填写。</a><br></div>
                <div class="upTX">
                    <a>店铺头像（商标）：</a>
                    <div class="tx">
                        <canvas id="can" width="200" height="200"></canvas>
                        <br>
                        <input type="file" value="上传头像" id="upload" name="upload">
                    </div>
                </div>
                <input type="submit" value="保存信息" class="btnXG">
            </div>
        </form>

    </div>
</div>
<script type="text/javascript" color="100,149,237" opacity='0.7' zIndex="-2" count="99" src="js/canvas-nest.js"></script>
</body>
<script>
    //获取上传按钮
    var input1 = document.getElementById("upload");
    if (typeof FileReader === 'undefined') {
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input1.setAttribute('disabled', 'disabled');
    } else {
        input1.addEventListener('change', readFile, false);
    }

    function readFile() {
        var file = this.files[0]; //获取上传文件列表中第一个文件
        if (!/image\/\w+/.test(file.type)) {
            //图片文件的type值为image/png或image/jpg
            alert("文件必须为图片！");
            return false;
        }
        // console.log(file);
        var reader = new FileReader(); //实例一个文件对象
        reader.readAsDataURL(file); //把上传的文件转换成url
        //当文件读取成功便可以调取上传的接口
        reader.onload = function (e) {
            var image = new Image();
            // 设置src属性
            image.src = e.target.result;
            var max = 200;
            // 绑定load事件处理器，加载完成后执行，避免同步问题
            image.onload = function () {
                // 获取 canvas DOM 对象
                var canvas = document.getElementById("can");
                // 如果高度超标 宽度等比例缩放 *=
                // 获取 canvas的 2d 环境对象,
                var ctx = canvas.getContext("2d");
                // canvas清屏
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 重置canvas宽高
                // 将图像绘制到canvas上
                // ctx.drawImage(image, 0, 0, image.width, image.height);
                ctx.drawImage(image, 0, 0, 200, 200);
                // 注意，此时image没有加入到dom之中
            };
        }
    };
</script>
</html>
